<template>
  <div class="container-fluid">
   <div class="container">
     <GlobalHeader :user="user"/>
     <ColumnList :list="list"/>
   </div>
    <button @click="logout" type="button" class="btn btn-primary">logout</button>
    <button @click="login" type="button" class="btn btn-danger">login</button>
    <button @click="logints" type="button" class="btn btn-success">logints</button>
    <telnumber/>
  </div>
</template>
<script  lang="ts" >
import 'bootstrap/dist/css/bootstrap.min.css'
import {defineComponent} from "vue";
import {ColumnProps} from "./components/ColumnList.vue";
import {UserProps} from "./components/GlobalHeader.vue";
import ColumnList from "./components/ColumnList.vue";
import GlobalHeader from "./components/GlobalHeader.vue";
import Telnumber from "./components/Telnumber.vue";
import {doLogin, doLoginTs} from "@/api/User";


const testData: ColumnProps[] = [
  {
    id: 1,
    title: "Sample Title 1",
    avatar: "https://picsum.photos/seed/51419/300/300",
    description: "This is the description for sample data 1.",
  },
  {
    id: 2,
    title: "寂寞成影萌宝",
    avatar: "https://picsum.photos/seed/75057/300/300",
    description: "This is the description for sample data 2.",
  },
  {
    id: 3,
    title: "Sample Title 3",
    avatar: "https://picsum.photos/seed/44547/300/300",
    description: "This is the description for sample data 3.",
  },
]
const currentUser:UserProps = {
  isLogin:true,
  name: "xio",
  id:12
}
export default defineComponent({
  name:"App",
  components: {ColumnList,GlobalHeader,Telnumber},
  setup(){

   const login = () => {
     doLogin({})
   }
    const logints = async () => {
      let response:API.LoginResponse = await doLoginTs({ name: "exampleUser" });
      console.log(response.msg);
      console.log(response.result.token);
    };

    return {
      list:testData,
      user:currentUser,
      login,
      logints
    }
  },
  methods: {
    logout() {
      // Perform any necessary logout actions
      // For example, resetting user data and redirecting to the login page
      this.user = {
        isLogin: false,
        name: '',
        id: null,
      };

      // You may want to redirect to the login page or perform other actions as needed
      // For now, let's just log a message to the console
      console.log('User logged out!');
    },
  }
})
</script>
